<template>
    <div>
<ul>
    <li v-for="item in list" :key="item.id" @click="$router.push('/detail/'+item.id)">
       <img :src="item.image" alt="" width="100%">
       <p>{{ item.title }}</p>
       <p>{{ item.price }}</p>
    </li>
</ul>
    </div>
</template>

<script setup>
import api from '@/api/api'
import { onMounted,ref } from 'vue'
const list=ref([])
onMounted(() => {
  api.get('/list',{
    params:{pagination:1, pageNum:30}
  }).then(res=>{
    if(res.data.code==200){
        list.value=res.data.data
    }
  })
})

</script>

<style lang="scss" scoped>
 ul{
    column-count: 2;
    li{
        break-inside: avoid;
    }
 }
</style>